<template>
  <div class="main">
    <nav-bar></nav-bar>
    <div class="item">
      <div class="header">
        <img src="../../assets/head.jpg" alt="" width="50px" height="50px" />
        <span class="name">User</span>
        <span class="content">我要坚持每天背单词100个，请大家监督我！</span>
      </div>
      <div class="img">
        <img
          src="../../assets/fighting2.svg"
          alt=""
          width="150px"
          height="150px"
        />
        <div class="switch">
          <switch-me  v-model="value1"></switch-me>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="header">
        <img src="../../assets/head.jpg" alt="" width="50px" height="50px" />
        <span class="name">User</span>
        <span class="content">我要坚持每天背单词100个，请大家监督我！</span>
      </div>
      <div class="img">
        <img
          src="../../assets/fighting2.svg"
          alt=""
          width="150px"
          height="150px"
        />
        <div class="switch">
          <switch-me  v-model="value1"></switch-me>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="header">
        <img src="../../assets/head.jpg" alt="" width="50px" height="50px" />
        <span class="name">User</span>
        <span class="content">我要坚持每天背单词100个，请大家监督我！</span>
      </div>
      <div class="img">
        <img
          src="../../assets/fighting2.svg"
          alt=""
          width="150px"
          height="150px"
        />
        <div class="switch">
          <switch-me  v-model="value1"></switch-me>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="header">
        <img src="../../assets/head.jpg" alt="" width="50px" height="50px" />
        <span class="name">User</span>
        <span class="content">我要坚持每天背单词100个，请大家监督我！</span>
      </div>
      <div class="img">
        <img
          src="../../assets/fighting2.svg"
          alt=""
          width="150px"
          height="150px"
        />
        <div class="switch">
          <switch-me  v-model="value1"></switch-me>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="header">
        <img src="../../assets/head.jpg" alt="" width="50px" height="50px" />
        <span class="name">User</span>
        <span class="content">我要坚持每天背单词100个，请大家监督我！</span>
      </div>
      <div class="img">
        <img
          src="../../assets/fighting2.svg"
          alt=""
          width="150px"
          height="150px"
        />
        <div class="switch">
          <switch-me  v-model="value1"></switch-me>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../community/community-components/NavBar.vue";
import SwitchMe from './community-components/SwitchMe.vue';
export default {
  components: { NavBar, SwitchMe},
  data() {
    return {
      value1: false
    };
  },
  methods: {
    }
};
</script>

<style>
.main{
  margin-bottom: 55px;
}
.item {
  width: 97%;
  margin-left: 1.5%;
  border-radius: 20px;
  border: 0.5px solid #f56f7c;
  margin-top: 5px;
}
.header {
  margin-top: 10px;
  margin-left: 10px;
  position: relative;
}
.name {
  position: absolute;
  top: 0;
  margin-left: 10px;
  font-size: 16px;
}
.content {
  position: absolute;
  bottom: 0;
  margin-left: 10px;
}
.img {
  margin-left: 50px;
  margin-bottom: 50px;
}
.switch{
  /* width: 100%; */
  height: 50px;
  position: absolute;
  right: 20px;
}
</style>